<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />	    
		<link rel="stylesheet" type="text/css" href="css/paiming.css"/>
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
		<link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_998195_uzr54qb73ne.css"/>
	</head>
	<body>
		<div class="web">
			<div class="title">
				<img src="img/z-paiming_03.jpg"/>
			</div>
			<ul>
				<!--<li> 
				  <div class="left">					
					<p><i style="color: yellow;" class="iconfont icon-guanjun"></i><br/>1</p>
					<div class="touxiang">
						<img src="img/z-touxiang_18.jpg"/>
					</div>
					<p>黄嘉阳</p>
				  </div>											
						<p style="text-align: right;">30位宾客</p>
				</li>-->
			</ul>
			<div class="house">
				<a href="z_index.html"><img src="img/z_house.png"/></a>
			</div>
		</div>
		<script src="js/jquery-2.1.0.js"></script>
		<script>
			var _ul = document.querySelector("ul");
			var _span = document.querySelector("span");
			var num = 1;
			for (var i = 0;i<100;i++) {
				if(i==0){
				var _li =`<li> 
					  <div class="left">					
						<p><i style="color: yellow;" class="iconfont icon-guanjun"></i><br/><span>${num}</span></p>
						<div class="touxiang">
							<img src="img/z-touxiang_18.jpg"/>
						</div>
						<p>黄嘉阳</p>
					  </div>											
							<p style="text-align: right;">30位宾客</p>
					</li>`
			  	_ul.innerHTML+=_li;
			  	num++;
				}
				if(i==1){
					var _li =`<li> 
					  <div class="left">					
						<p><i style="color:#d3d3d3;" class="iconfont icon-guanjun"></i><br/><span>${num}</span></p>
						<div class="touxiang">
							<img src="img/z-touxiang_18.jpg"/>
						</div>
						<p>黄嘉阳</p>
					  </div>											
							<p style="text-align: right;">30位宾客</p>
					</li>`
			  	_ul.innerHTML+=_li;
			  	num++;	
				}
				if(i==2){
					var _li =`<li> 
					  <div class="left">					
						<p><i style="color:#e7c598;" class="iconfont icon-guanjun"></i><br/><span>${num}</span></p>
						<div class="touxiang">
							<img src="img/z-touxiang_18.jpg"/>
						</div>
						<p>黄嘉阳</p>
					  </div>											
							<p style="text-align: right;">30位宾客</p>
					</li>`
			  	_ul.innerHTML+=_li;
			  	num++;	
				}				
				if(i>=3){
					var _li =`<li> 
					  <div class="left">					
						<p><span>${num}</span></p>
						<div class="touxiang">
							<img src="img/z-touxiang_18.jpg"/>
						</div>
						<p>黄嘉阳</p>
					  </div>											
							<p style="text-align: right;">30位宾客</p>
					</li>`
			  	_ul.innerHTML+=_li;
			  	num++;
				}
			  	console.log(num)
			}
			console.log(num)
		</script>
	</body>
</html>
